<template>
	<div
		class="betting-record bg-bg-3 mt-2 rounded-2xl text-t-3 text-sm cursor-pointer"
		@click="handleClick">
		<div class="px-[10px] py-[10px] flex justify-between items-center">
			<div class="flex flex-1">
				<base-image
					class="w-[65px] h-[65px] object-cover rounded-sm"
					:src="imgSrc"
					:type="imgServer" />
				<div class="flex items-center ml-1 justify-between flex-1">
					<div class="flex-1 flex flex-col h-[100%] justify-around items-start">
						<div
							class="app-font-bold text-t-1 text-base w-[100%] overflow-hidden text-ellipsis whitespace-nowrap">
							{{ data.gameName }}
						</div>
						<div
							class="app-font-bold text-t-2 w-[100%] overflow-hidden text-ellipsis whitespace-nowrap">
							{{ data.providerName || data.portalDisplayName || data.provider }}
						</div>
						<span
							class="inline text-xs bg-[var(--color-success)] text-t-1 rounded-sm px-2 py-[2px]"
							v-if="type === 'slots'">
							{{ 'RTP&nbsp;' + data.rtp }}
						</span>
					</div>
				</div>
			</div>
			<div class="flex flex-col h-[65px] items-end ml-1 justify-around">
				<up-amount class="text-success text-base" :value="data.totalPayout" />
				<div class="text-sm">{{ $t('slotsProfile.payout') }}</div>
				<up-match-time
					v-if="type === 'casino'"
					:time="data.settleAt"
					:showRelative="true"
					style="margin-right: 0" />
				<up-match-time
					v-if="type === 'slots' && data.lastCreateTime"
					:time="new Date(data.lastCreateTime).toISOString()"
					showDate
					showRelative
					isFeeds
					:isResult="true"
					style="
						color: var(--color-text-3);
						margin-right: 0;
						font-size: 12px;
						line-height: 14px;
						white-space: nowrap;
					"></up-match-time>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { BaseImage } from '@/components/base'
import { useRouter } from 'vue-router'
import { UpAmount, UpMatchTime } from '@/components/up'
import { useProfileStore } from '@/store'

const router = useRouter()
const profileStore = useProfileStore()
const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	type: {
		type: String,
		default: 'slots'
	}
})

const imgSrc = computed(() => {
	if (props.data.tableIconDisplay) {
		return props.data.tableIconDisplay
	}
	if (props.data.gameIcon) {
		return props.data.gameIcon
	}
	return 'placeholder.svg'
})

const imgServer = computed(() => {
	if (imgSrc.value?.indexOf('http') === 0) {
		return 'network'
	}
	if (imgSrc.value !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
})

const handleClick = () => {
	profileStore.hideProfile()
	if (props.type === 'casino') {
		router.push({
			name: 'CasinoDetail',
			params: {
				id: props.data.fullGameName
			}
		})
	} else {
		router.push({
			name: 'SlotsDetail',
			params: {
				id: props.data.gameKey
			}
		})
	}
}
</script>
